<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        body iframe, body > iframe {
            opacity:0;
            display:none;
        }
        #confirm {
            height: 56px;
            width: 100%;
            border-radius: 5px;
            border-style: none;
            background-color: #f392bb;
            font-size: 20px;
            padding: 5px;
            color: #fcfcfc;
            margin: 15px 0;
        }

        .specification-name {
            width: 100%;
        }

        ul {
            padding-left: 0;
        }

        li {
            list-style-type: none;
        }

        .spec a {
            border: 1px solid #f0f0f0;
            border-radius: 5px;
            background-color: #f0f0f0;
            font-size: 16px;
            padding: 2px 10px;
        }

        .spec a.selected {
            border: 1px solid #f392bb;
            border-radius: 5px;
            background-color: #f392bb;
        }

        .spec a span {
            color: white;
            padding: 0 5px;
        }

        .spec.clearfix * {
            float: left;
        }

        .spec.clearfix li {
            margin-left: 5px;
        }

        div#specification {
            padding: 5px 5px;
        }

        .locked span{
            text-decoration-line: line-through;
            text-decoration-color: #f392bb;
        }
    </style>
</head>
<body>
<div class="explain_pic_in3 clearfix" id="specification">
[#assign specificationValues = product.goods.specificationValues /]
[#list product.specifications as specification]
    <div class="spec clearfix">
        <span class="specification-name" title="${specification.name}">${abbreviate(specification.name, 8)}: </span>
        <ul>
            [#list specification.specificationValues as specificationValue]
                [#if specificationValues?seq_contains(specificationValue)]
                    <li>
                        <a href="javascript:"
                           class="${specification.type}[#if product.specificationValues?seq_contains(specificationValue)] selected[/#if]"
                           val="${specificationValue.id}">
                            <span>${specificationValue.name}</span>
                        </a>
                    </li>
                [/#if]
            [/#list]
        </ul>
    </div>
[/#list]
    <div class="spec clearfix" id=" confirm_div">
        <button id="confirm" class="spec comfirm clearfix">确认</button>
    </div>
</div>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.js"></script>
<script>
    ;
    (function ($, document, config) {
        "use strict";
        var project = {
            init: function () {
                var _ = this;
                _.initPage();
                _.bindEvent();
            },
            initPage: function () {
                var _ = this;
            },
            bindEvent: function () {

                var $specification = $("#specification div");
                var $specificationValue = $("#specification a");

                //定义变量记录选择的规格
                var targetId;

                var productMap = {};
            [@compress single_line = true]
                productMap[${product.id}] = {
                    path: null,
                    id: "${product.id}",
                    specificationValues: [
                        [#list product.specificationValues as specificationValue]
                            "${specificationValue.id}"[#if specificationValue_has_next],[/#if]
                        [/#list]]
                };
                [#list product.siblings as product]
                    productMap[${product.id}] = {
                        path: "${product.path}",
                        id: "${product.id}",
                        specificationValues: [
                            [#list product.specificationValues as specificationValue]
                                "${specificationValue.id}"[#if specificationValue_has_next],[/#if]
                            [/#list]]
                    };
                [/#list]
            [/@compress]

                // 判断是否包含
                function contains(array, values) {
                    var contains = true;
                    for (var i in values) {
                        if ($.inArray(values[i], array) < 0) {
                            contains = false;
                            break;
                        }
                    }
                    return contains;
                }

                //根据默认的规格锁定不能使用的规格
                window.onload = lockSpecificationValue();

                // 规格值选择
                $specificationValue.click(function () {
                    var $this = $(this);
                    if ($this.hasClass("locked")) {
                        return false;
                    }
                    $this.toggleClass("selected").parent().siblings().children("a").removeClass("selected");
                    var selectedIds = [];
                    $specificationValue.filter(".selected").each(function (i) {
                        selectedIds[i] = $(this).attr("val");
                    });
                    var locked = true;
                    $.each(productMap, function (i, product) {
                        if (product.specificationValues.length == selectedIds.length && contains(product.specificationValues, selectedIds)) {
                            if (product.path != null) {
//                                location.href = "/app/product/detail.htm?pId=" + product.id;
                                //在这里记录Product的id,在外面用确认按钮提交一个productId
                                targetId = product.id;
//                                locked = false;
                            }
                            return false;
                        }
                    });
                    if (locked) {
                        lockSpecificationValue();
                    }
                    return false;
                });

                // 锁定规格值
                function lockSpecificationValue() {
                    var selectedIds = [];
                    $specificationValue.filter(".selected").each(function (i) {
                        selectedIds[i] = $(this).attr("val");
                    });
                    $specification.each(function () {
                        var $this = $(this);
                        var selectedId = $this.find("a.selected").attr("val");
                        var otherIds = $.grep(selectedIds, function (n, i) {
                            return n != selectedId;
                        });
                        console.log("++++++++++::"+otherIds.toString());
                        $this.find("a").each(function () {
                            var $this = $(this);
                            otherIds.push($this.attr("val"));
                            var locked = true;
                            $.each(productMap, function (i, product) {
                                if (contains(product.specificationValues, otherIds)) {
                                    locked = false;
                                    return false;
                                }
                            });
                            if (locked) {
                                $this.addClass("locked");
                            } else {
                                $this.removeClass("locked");
                            }
                            otherIds.pop();
                        });
                    });
                }

                //提交productId
                $('#confirm').click(function () {
//                    console.log("++++++++++++++pId::" + targetId);
                    //app接口获取pId
                    client.product_detail(targetId);
                })
            }

        };

        $(document).ready(function () {
            project.init();
        });
    })(jQuery, document, {});
</script>
</body>
</html>
